import { Button } from 'antd';
import styles from './index.module.scss';
import img from '@/images/avatar.png';
interface IndexProps {
    // 定义你的props类型
}

function Index(props: IndexProps) {
    console.log('Index component rendered');
    const notifyMe = () => {
        const optionNotification = (): NotificationOptions => {
            return {
                body: '消息通知主体',
                icon: img,
            };
        };
        if (!('Notification' in window)) {
            // 检查浏览器是否支持通知
            alert('当前浏览器不支持桌面通知');
        } else if (Notification.permission === 'granted') {
            // 检查是否已授予通知权限；如果是的话，创建一个通知
            const notification = new Notification('你好！', optionNotification()); // …
        } else if (Notification.permission !== 'denied') {
            // 我们需要征求用户的许可
            Notification.requestPermission().then((permission) => {
                // 如果用户接受，我们就创建一个通知
                if (permission === 'granted') {
                    const notification = new Notification('你好！', optionNotification()); // …
                }
            });
        } // 最后，如果用户拒绝了通知，并且你想尊重用户的选择，则无需再打扰他们
    };

    return (
        <div className={styles.container}>
            <Button type="primary" onClick={notifyMe}>
                触发浏览器提示
            </Button>
        </div>
    );
}

export default Index;
